<template>
	<view class="index_wrap" > 
		<shopTrick v-if="showTop"></shopTrick> 
		<view :class="'search_tab '+(!showTop?'search_tabfixed':'')">
			 <view class="top_search" @click="goSearch">
				 <label>搜索</label>
			 </view>
			 <view class="tab_topList"> 
				  <scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
					 <block v-for="(item,index) in tablist">
						 <label :class="{ curColor:changeColor == index}" :style="'display:'+(pageInfo.set_diypage == false && index == 1 ?'none':'')" @click="changeTab(index)">{{item}}</label> 
					 </block>
				  </scroll-view>
			 </view> 
		</view>  
		<block v-if="pageInfo.set_diypage == true && changeColor == 0">
			   <view v-for="item  in field_list" :key="">
			   	<!-- 公告 -->
			   	<view v-if="item.field_type == 'notice'" @click = "click_notice(item.content.content)">
			   		<view class="container-news">
			   			<view class="notice-box">
			   				<view class="laba-icon">
			   					<image src="../../../static/images/laba.png" class="laba-img"></image>
			   				</view> 
			   				<view class="gundong-box" id="news_title_box">
			   					<view :class="'animate ' + (item.content.length > 30 ? 'animation' : '')" id="news_title">
			   						 {{ item.content.content }}
			   					</view>
			   				</view>
			   				<view class="right-gengduo"> 
			   					<view class="right-icon">
			   						<image src="../../../static/images/right.png" class="right-img"></image>
			   					</view>
			   				</view>
			   			</view>
			   		</view>
			   	</view> 
			   	<!-- 图片导航组件 --> 
			   	<view v-if="item.field_type == 'image_nav'">
			   		<uni-grid :column="4" :show-border="false"  :square="false">
			   			<uni-grid-item class="nav_pic" v-for="(value, key, index)  in item.content" >
						 <view class="textBlock" @click = "goUrl(value.url)" >
							 <image :src="value.image" class=""></image>
							 <view class="text">{{ value.title }}</view>
						 </view> 
			   			</uni-grid-item>  
			   		</uni-grid>
			   	</view> 
			   	<!-- 富文本 -->
			   	<view  v-if="item.field_type == 'rich_text'" :style="{'background':item.content.bgcolor}" class="richText">
			   		<rich-text :nodes="item.content.content"  ></rich-text>
			   	</view>
			   	<!-- 标题组件 -->
			   	<view  v-if="item.field_type == 'title'" >
			   		<view :class="'head_til '+(item.content.bgcolor !=''? 'head_til1':'')" :style="{'background':item.content.bgcolor,'textAlign':item.content.show_method == 0 ? 'left':item.content.show_method == 1?'center':'right' }">
			   			<view :style="{'color':item.content.txtcolor}" class="til_h1"> {{ item.content.title }}</view>
			   			<view v-if="item.content.sub_title" class="til_h2" :style="{'color':item.content.txtcolor2}" > {{ item.content.sub_title }}</view>
			   		</view>
			   	</view>
			   	 <!-- 文本导航 -->
			   	<view v-if="item.field_type == 'text_nav'"> 
			   		<uni-list>
			   			<view  v-for="(value, key, index)  in item.content"  @click = "goUrl(value.url)">
			   				<uni-list-item :title="value.title" :show-arrow="true" ></uni-list-item>
			   			</view>
			   		</uni-list>
			   	</view>
			   	<!-- 优惠券组件 -->
			   	<view v-if="item.field_type == 'coupons' && item.content.coupon_arr && item.content.coupon_arr.length >0">
			   		<uni-grid :column="3" :show-border="false"  :square="false" class="yhq_box">
			   			<uni-grid-item v-for="jtem in item.content.coupon_arr" class = "yhqList" >
			   				<view :class="'border_yhq'+(jtem.had_pull == jtem.num?'hover':'')" @click = "coupon_arrClick(jtem.coupon_id)" >
			   					<view class="text">¥ <text > {{ jtem.discount  }}</text></view> 
			   					<view class="name">{{ jtem.name  }}</view>	
			   				</view> 
			   			</uni-grid-item> 
			   		</uni-grid> 
			   	</view>
			   	<!-- 店铺地图 -->
			   	<view v-if="item.field_type == 'map'">
			   		<map style="width: 100%; height: 300px;" :latitude="item.content.lat" :longitude="item.content.lng" 
					:markers="item.content.markers" @tap="goStoreMap(item)">
			   		</map> 
			   	</view> 
			   	<!-- 辅助空白 -->
			   	<view  v-if="item.field_type == 'white'">
			   		<view class="fzHd" :style="{'height':item.content.height +'px'}"></view>
			   	</view>
			   	<!-- 图片广告组件 -->
			   	 <view v-if="item.field_type == 'image_ad'" >
			   		<swiper v-if="item.content.image_type == 0" class="swiper" indicator-color="#ffffff"    :indicator-dots="dotS_show" :autoplay="true" interval="5000" duration="500"
			   		:style="{ 'width':'100%','height':(windowWidth*item.content.max_height/item.content.max_width)+'px' }"> 
			   			<swiper-item v-for="jtem in item.content.nav_list" @click="goUrl(jtem.url)" >
			   				<view class="swiper-item uni-bg-red slidebox" :style="{ 'width':'100%','height':(windowWidth*item.content.max_height/item.content.max_width)+'px' }"> 
			   					<image :src="jtem.image" :style="{ 'width':'100%','height':(windowWidth*item.content.max_height/item.content.max_width)+'px' }" mode="scaleToFill"></image>
			   					<view class="slide_til">{{ jtem.title }}</view> 
			   				</view>
			   			</swiper-item> 
			   		</swiper>
			   		<view v-if="item.content.image_type == 1"   :class="(item.content.image_size == 1?'slideTypeAd':'')">  
			   			<view :class="' slidebox ' + (item.content.image_size == 1?'custom-image-small':'')" v-for="jtem in item.content.nav_list" @click="goUrl(jtem.url)">
			   				<image :src="jtem.image" mode="scaleToFill" :style="{'width':  (item.content.image_size == 1?windowWidth/2-10+'px':'100%'),'height':(windowWidth/2-10)+'px'}"></image>
			   				<view class="slide_til" :style="{'width':  (item.content.image_size == 1?windowWidth/2-10+'px':'100%')}">{{ jtem.title }}</view>
			   			</view>
						<view class="clear"></view>
			   		</view>
			   	 </view>
			   	 <!-- 商品 -->
			   	 <view v-if="item.field_type == 'goods'" :class="item.content.size == 1?'goods_blockSm':''">
			   		 <block v-if = "item.content.size == 0 || item.content.size == 1" >
			   			 <view v-for = "jtem in item.content.goods" class="goods_block" @click = 'goUrl(jtem.url)'>  
			   				  <view class="imgtable" :style="{ 'width':item.content.size=='1' ? (windowWidth/2)+'px': windowWidth+'px', 'height': item.content.size=='1' ? (windowWidth/2)+'px': (500*windowWidth/900/2)+'px'}">
			   					  <image :src="jtem.image" :style="{ 'width':item.content.size=='1' ? (windowWidth/2)+'px': '100%', 'max-height': item.content.size=='1' ? (windowWidth/2)+'px': (500*windowWidth/900/2)+'px'}" ></image> 
			   				  </view>
			   				 <view :class="(item.content.size_type == 2 && item.content.price ==1 ?'alap_text '+(item.content.show_title == 1 ? 'alap_text2':'') :'')"  >  
			   					 <view v-if = 'item.content.show_title == 1' :class="(item.content.size == 1?'over_p2':'')" style="max-width:80%">{{ jtem.title }}</view>
			   					 <view v-if = 'item.content.price == 1' class="good_price">¥{{ jtem.price }}</view> 
			   				 </view> 
			   				 <block v-if = 'item.content.buy_btn == 1 && item.content.size_type == 0'> 
			   					<view :class="'btn_show ' + 'btn'+item.content.buy_btn_type" :style="'bottom:'+(item.content.show_title ==0 && item.content.price ==0 ?'28px':'8px')" >
			   					</view>  
			   				 </block> 
			   			 </view>
						 <view class="clear"></view>
			   		 </block>
			   	 </view> 
			   </view>  
			 </block> 
			<!-- 新品 --> 
			<goods v-if="pageInfo.set_diypage == true && changeColor == '1' || pageInfo.set_diypage == false && changeColor == '0'" :topFixed = 'topFixed' :changPage ='changPage' :gotop="gotop" v-on:nodata="nodataTranfer"></goods>
		<newGoods v-if=" changeColor == '2' " v-on:nodata="nodataTranfer"></newGoods> 
		 <userinfo v-if="user_options.toLogin" :options="user_options" ></userinfo>
		<view class="zw_block"></view>
		<tabbar :tranfState="tranfState"></tabbar> 
	</view>
</template>

<script>
	import shopTrick from '../components/shopTrick/shopTrick'  
	import tabbar from '../components/tabbar/tabbar' 
	import uniList from "../../village/component/uni-list/uni-list.vue"
	import uniListItem from "../../village/component/uni-list-item/uni-list-item.vue"
	import uniPopup from "@/appComponent/uni/uni-popup/uni-popup.vue" 
	import uniGrid from "../../village/component/uni-grid/uni-grid.vue"
	import uniGridItem from "../../village/component/uni-grid-item/uni-grid-item.vue"
	import uniCard from "@/appComponent/uni/uni-card/uni-card"
	import goods from '../store_home/goods'
	import newGoods from '../store_home/newGoods' 
	 
	var common = require('../../../utils/common.js');
	var shop_common = require('../../../utils/shop/common.js');
	var mall_common = require('../../mall/js/common.js');
	const { windowWidth, windowHeight } = uni.getSystemInfoSync();
	var app = getApp(); 
	var store_id=''
	export default {
		data() {
			return { 
				field_list:[],  
				windowWidth:windowWidth, 
				windowHeight:windowHeight,
				showTop:false,
				pageInfo:'', 
				user_options: {},  
				tablist:['首页','宝贝','新品'], 
				changeColor:0,
				topFixed:false,
				tranfState:'',
				hackReset:false,
				dotS_show:false,
				changPage:0,
				gotop:false 
			}
		},
		onLoad(option) {   
			store_id = option.store_id    
			var that = this  
			this.tranfState = 'index' 
			// console.log(mall_common.initData(store_id),'77777') 
			// shop_common.getStorage('store_id').then(data=>{
			// 	console.log(data) 
			// 	if(store_id!=data){
			// 		shop_common.setStorage('store_id',store_id)  
			// 	}else{
			// 	    store_id = data
			// 	}
			// })	
			 
			 that.init()
		},
		mounted(){  
			var that = this 
			// shop_common.getStorage('store_id').then(data=>{
			// 	console.log(data) 
			// 	if(store_id!=data){
			// 		shop_common.setStorage('store_id',store_id)  
			// 	}else{
			// 	    store_id = data
			// 	}
			// })	
			that.init()
		},
		components: {
			shopTrick, 
			tabbar,
			uniList,
			uniListItem,
			uniPopup, 
			uniGrid,
			uniGridItem,
			uniCard,
			goods,
			newGoods
		},
		methods: { 
			click_notice(Option){ 
				uni.showModal({
				    title: '公告',
				    content: Option,
					showCancel: false,
				    success: function (res) {
				        if (res.confirm) { 
				        }  
				    }
				});
			},
			coupon_arrClick(Option){ 
				var that = this
				if(app.globalData.is_login){
					common.post('Wxapp_merchant&a=had_pull', {
						coupon_id: Option
					}, data => {  
						console.log(data)  
						  if(data.wx_cardid){
							  //  #ifdef  MP-WEIXIN 
							 var cardlist = [];
							 cardList.push({ 
								    cardId: data.wx_cardid,
								    cardExt: '{"code": "", "openid": "", "timestamp": data.wx_ticket_addtime, "signature":data.cardsign}' 
							 })
							 wx.addCard({
							   cardList: cardList, 
							   success: function(res) { 
									uni.showModal({
										title: '领取成功',
										content: '您已经成功领取了该优惠券，在支付时可使用',
										showCancel: false
									});	  
							   }
							 }) 
							 //  #endif
							 
						  } else{
							  uni.showModal({
							  	title: '领取成功',
							  	content: '您已经成功领取了该优惠券，在支付时可使用',
							  	showCancel: false
							  });	 
						  } 
					})
				}else{
					that.user_options = {
						toLogin: true
					};
				}  
			},
			init(){ 
				var that = this 
				this.hackReset = false
				this.$nextTick(() => {
					this.hackReset = true
					common.post('Mall&a=store', {
						store_id: store_id
					}, data => { 
						that.showTop = true 
						that.pageInfo = data
						that.field_list = data.diypage_content  
						that.field_list.forEach(function(element){  
							if(element.field_type == 'image_ad'){   
								if(element.content.nav_list.length  > 1){
									that.dotS_show = true
								}else{ 
									that.dotS_show = false
								}
								
							} 
						})
						// shop_common.setStorage('pageInfo',data) 
						// shop_common.setStorage('store_id',store_id) 
					})
				}) 
			},
			goUrl(option){    
				if(option){
					window.location.href = option
				} 
			},
			onPageScroll:function(e){ 
				if(e.scrollTop >10){
					this.showTop = false
					this.topFixed = true
				}else{
					this.showTop = true
					this.topFixed = false
				} 
				
				if(e.scrollTop >300){
					this.gotop = true
				}
			}, 
			onReachBottom(){ 
				 this.changPage++ 
			},
			goStoreMap(option){
				var that = this
				var dataset = {
				  type: 'gcj02',
				  name:that.pageInfo.name,
				  address: '',
				  lng: that.pageInfo.gcj02_long,
				  lat: that.pageInfo.gcj02_lat
				};
				common.openMap(dataset)
			},
			changeTab(index){
				console.log(index)
				this.changeColor = index
			},
			goSearch(){
				mall_common.goSearch(store_id)
			}  
		}
	}
</script>

<style> 
@import url("../css/mall.css");
body{
	 padding-bottom: calc(98rpx + constant(safe-area-inset-bottom));
	 padding-bottom: calc(98rpx + env(safe-area-inset-bottom));
	 padding-bottom: 120rpx;
}
.alap_text{
	position: absolute; 
	right: 10px;
	bottom: 20px;
	background: rgba(0,0,0,0.4);
	z-index: 99;
	color: #fff;	
	box-sizing: border-box;
	padding: 5px 10px;
	border-radius: 4px;
	font-weight: bold; 
}
.alap_text.alap_text2{
	left: 10px;
	display: flex;
	flex-direction: row;
	flex-wrap:nowrap;
	justify-content:space-between;
	align-items:center;
	font-size: 12px;
}
.alap_text .good_price{
	color: #fff;
}
.goods_block{
	position: relative;
	padding: 10px;
	box-sizing: border-box;
}
.goods_block .imgtable{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	max-height: 100%;
	max-width: 100%;  
	overflow: hidden;
} 
 .goods_blockSm{  
}
 .goods_blockSm .goods_block{
	width: 47%;
	float: left;
	margin: 5px 1%;
	overflow: hidden;
	font-size: 14px;
}
.good_price{
	color: #ff6600;
	font-weight: normal;
}
.slideTypeAd{
	padding: 0 5px;
	box-sizing:border-box;
}
.btn_show{
	position: absolute;
	right: 10px;
	bottom: 8px;
	height: 25px;
	width: 30px;
	background: url(../../../static/mall/cart.png);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 40px auto;
}
.btn_show.btn2{
	height: 20px;
	background-position: 0 -88px;
}
.btn_show.btn3{ 
	background-position: 0 -25px;
	width: 40px;  
}
.btn_show.btn4{ 
	background-position: 0 -50px;
	height: 20px;
	width: 37px; 
}

 .nav_pic image{
	 width: 50px;
	 height: 50px;
 }
 .nav_pic .text{
	 font-size: 12px;
 }
 .head_til{
	border-bottom: 1px dashed #ddd;
	padding: 10px;
	margin: 10px 0;
 }
  .head_til1{
	  border-bottom: none;
  }
 .head_til span{
	font-size: 16px; 
 }
 .fzHd{
	 width: 100%; 
	 background: #fff;
 }
 .yhqList{ 
	 text-align: center; 
	 height: 80px;
	 margin-bottom:10px;
 }
 .yhqList .border_yhq.hover{
	 background: #999;
	 color: #fff;
	 border:1px solid #fff;
 }
 .yhqList .border_yhq{ 
	border-radius: 5px;
	display: block; 
	margin: 5px; 
	padding: 10px 0;
	background: #ffeaec;
	width: 94%;
	height: 60px;
 }
 .yhqList .border_yhq .text{
	 font-size: 14px;
 }
 .yhqList .uni-grid-item__box-item{
	 padding: 0!important;
 }
 .yhq_box .yhqList{
	 
 }
 /* 通知滚动 */
.container-news{
	background: #ffc;
}
 .notice-box {
 	display: flex;
 	flex-direction: row;
 	margin: 16rpx 14rpx;
 	align-items: center;
	background: #ffc;
 	box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(182, 182, 182, 0.18);
 	padding: 0rpx 8rpx;
 	overflow: hidden;
 	height: 68rpx;
 }
 
 .time-text {
 	font-size: 22rpx;
 	font-weight: 400;
 	color: rgba(102, 102, 102, 1);
 	line-height: 60rpx;
 	flex-shrink: 0;
 	margin-left: 10rpx;
 	margin-right:10rpx;
 }
 
 .laba-icon {
 	width: 30rpx;
 	height: 30rpx;
 	margin-top: -4rpx;
 	margin-left: 15rpx;
 	flex-shrink: 0;
 }
 
 .laba-img {
 	width: 100%;
 	height: 100%;
 }
 
 .gundong-box {
 	overflow: hidden;
 	flex-shrink: 0;
 	flex-grow:1;
 	width: calc(100% - 130px);
	text-align: left;
 }
 
 .animate {
 	padding-left: 10rpx;
 	font-size: 22rpx;
 	font-weight: 500;
 	color: rgba(51, 51, 51, 1);
 	line-height: 60rpx;
 	display: inline-block;
 	white-space: nowrap;
 }
 
 .animation {
 	animation: 30s wordsLoop linear infinite normal;
 }
 
 @keyframes wordsLoop {
 	0% {
 		transform: translateX(0px);
 		-webkit-transform: translateX(0px);
 	}
 
 	100% {
 		transform: translateX(-100%);
 		-webkit-transform: translateX(-100%);
 	}
 }
 
 @-webkit-keyframes wordsLoop {
 	0% {
 		transform: translateX(0px);
 		-webkit-transform: translateX(0px);
 	}
 
 	100% {
 		transform: translateX(-100%);
 		-webkit-transform: translateX(-100%);
 	}
 }
 
 .right-gengduo {
 	display: flex;
 	flex-direction: row;
 	align-items: flex-end;
 	margin-left:10rpx;
 	flex-shrink: 0;
 }
 
 .gengduo {
 	font-size: 22rpx;
 	font-weight: 400;
 	color: rgba(153, 153, 153, 1);
 	line-height: 60rpx;
 	float: right;
 }
 
 .right-icon {
 	width: 28rpx;
 	height: 28rpx;
 	margin-bottom: calc(50% - 0rpx);
 	flex-shrink: 0;
 }
 
 .right-img {
 	width: 100%;
 	height: 100%;
 } 
 
 .text-area {
 	display: flex;
 	justify-content: center;
 }
 
 .title {
 	font-size: 36upx;
 	color: #8f8f94;
 }
 #news_title_box{
	 text-align: left;
 }
 
 /* 滚动公告 */
 .richText{
	 padding: 10px;
 }
 .til_h1{
	 font-size: 16px;
 }
 .til_h2{
	  font-size: 14px;
 }
 .yhq_box{
	 padding-bottom: 20px;
 }
.yhq_box .yhqList  .border_yhq{
	border:1px solid #fa5262;
	color: #fa5262;
}
.yhq_box .yhqList:nth-child(2) .border_yhq{
	border:1px solid #7acf8d;
	color: #7acf8d;
	background: #f3ffef;
}
.yhq_box .yhqList:nth-child(3) .border_yhq{
	border:1px solid #ff9664;
	color: #ff9664;
	background: #ffeae3;
}
.yhq_box text{
	font-size: 24px;
}
.yhq_box .name{
	font-size: 12px;
}
.slidebox{
	position: relative;
	width: 100%; 
	margin-bottom: 10px;
}
.slidebox img{
	width: 100%;
	height: 320px;
}
.slide_til{
	position: absolute;
	left: 0;
	bottom: 5px;
	background: rgba(0,0,0,0.6);
	color: #fff;
	padding: 0 10px;
	width: 100%;
	line-height: 30px;
	font-size: 12px;
	box-sizing: border-box;
	
}
.over_p2{
	overflow: hidden;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	box-orient: vertical;
	display: -webkit-box;
	display: box;
	min-height: 46px; 
}
.swiper{
	padding: 10px 0;
}
.swiper .slide_til{
	bottom: 0px;
}
.slidebox.custom-image-small{
	width: 49%;
	float: left;
	
}
.slidebox.custom-image-small:nth-child(2n){
	margin-left: 2%;
}
.slideType1{
	display: flex;
	flex-direction: row;
	flex-wrap:nowrap;
	justify-content:space-between;
	align-items:center
}
.slideType1 .slidebox .slide_til{
	bottom: 5px;  
}
.clear{
	clear: both;
}
.textBlock{
	text-align: center;
	display: block;
}

</style>
